<template>
	<view class="amountDil-content">
		<yk-header :title="title" @headBtn="headBtn()" @closePage="closePage()"></yk-header>
		<view class="change-kind-box">
			<view class="change-kind-amount" @click="changeModelshow()">
				<view c>{{status==0?"额度收入":"额度支出"}}</view>
				<view class="balance-desc"></view>
			</view>
			<picker class="change-kind-time" start="1970-01" end="2100-01" mode="date" fields='month' @change="bindDateChange">
				<view>{{queryTime}}</view>
				<view class="balance-desc"></view>
			</picker>
			<view class="change-kind-model" v-if='changeModel'>
				<view 
					:class="[status==0?'active':'']"
					data-status="0"
					@click="amountKind($event)"
				>额度收入<image v-if='status==0' src="../../static/img/zhanye/dui.png" mode=""></image></view>
				<view 
					:class="[status==1?'active':'']"
					data-status="1"
					@click="amountKind($event)"
				>额度支出<image v-if='status==1' src="../../static/img/zhanye/dui.png" mode=""></image></view>
			</view>
		</view>
		
		<view class="amount-list">	
			<view class="amount-box"
				v-for="(amount, index) in AmountList"
				:key="index"
			>
				<view class="box-msg-f">
					<view class="amount-box-msg">
					{{status==1?"给":""}}{{amount.type==5?"":"客户"}}{{amount.remarks_name}}
					{{amount.type==1?"充值":(amount.type==2?"绑卡":(amount.type==3?"抵扣":(amount.type==4?"发券":(amount.type==5?"系统发放额度":(amount.type==6?"自动发券":"其他")))))}}
					{{status==0?"":amount.amount_involved}}
					{{status==0?"":"元"}}</view>
					<view class="amount-box-time">{{amount.create_time}}</view>
				</view>
				<view class="send-money" :class="[status==0?'active':'']">{{status==0?"+":""}}{{amount.alteration_detailed}}</view>
			</view>
			<!-- <view class="amount-box">
				<view class="box-msg-f">
					<view class="amount-box-msg">给客户13600001234发券200元</view>
					<view class="amount-box-time">2019-01-10</view>
				</view>
				<view class="send-money">-200</view>
			</view> -->
		</view>
		
		<view class="loading-text" v-if="AmountList.length>10||AmountList.length<1">{{ loadingText }}</view>
	</view>
</template>

<script>
	let page = 1,
		limit = 10;
	export default {
		data() {
			return { 
				title: '额度明细',
				status:0,
				queryTime:'',
				AmountList:[],
				loadingText:'',
				queryTime:'',
				changeModel:false
			};
		},
		onLoad() {
	
		},
		onShow() {
			document.title = '额度明细';
			page = 1;
			limit = 10;
			this.AmountList = [];
			this.queryTime=this.getDate();
			this.loadingText = '加载中...';
			this.getAmountList();
		},
		methods: {
			//顶部功能键
			headBtn(e) {
				let that = this;
				uni.showActionSheet({
					itemList: ['刷新', '清除缓存'],
					success: function(res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						if (res.tapIndex == 0) {
							//刷新
							uni.showLoading({
								title: '刷新中'
							});
							setTimeout(function() {
								uni.hideLoading();
							}, 1500);
	
						} else {
							//清楚缓存
							// callNative('onClearH5Cache')
							uni.showToast({
								title: '清除缓存成功'
							});
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			//关闭当前页面
			closePage() {
				callNative('navigateBack')
			},
			getDate() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				
				month = month > 9 ? month : '0' + month;
				return `${year}-${month}`
			},
			//明细类型选择
			amountKind(e){
				console.log(e.currentTarget.dataset.status);
				this.status=e.currentTarget.dataset.status;
				this.changeModelshow();
				page = 1;
				limit = 10;
				this.AmountList = [];
				this.loadingText = '加载中...';
				this.getAmountList();
			},
			//选择model弹出
			changeModelshow(){
				if(this.changeModel){
					this.changeModel=false
				}else{
					this.changeModel=true
				}
			},
			//时间选择
			bindDateChange(e) {
				this.date = e.target.value;
				this.queryTime=e.target.value.substring(0,7);
				page = 1;
				limit = 10;
				this.AmountList = [];
				this.loadingText = '加载中...';
				this.getAmountList();
			},
			//自动发券列表
			getAmountList() {
				console.log(this.queryTime);
				try {
					// console.log('getbindcardList === ' + uni.getStorageSync('token'));
					uni.request({
						url: this.$usereq + '/coupon-expand/customer/quotatotal/quota/list',
						method: 'GET',
						header: {
							'blade-auth': decodeURI(uni.getStorageSync('token')),
							'content-type': 'application/json'
						},
						data: {
							page: page,
							pageSize: limit,
							detailedStatus:this.status,
							queryTime:this.queryTime
						},
						success: res => {
							let datas = res.data;
							console.log(datas);
							let newList = datas.data;
							if (newList != null && newList != '' && newList.length > 0) {
								this.AmountList = this.AmountList.concat(newList);
								page++;
								if (newList.length <= 9) {
									this.loadingText = '没有更多了';
								}
							} else {
								this.loadingText = '没有更多了';
							}
							uni.stopPullDownRefresh();
						}
					});
				} catch (e) {
					uni.hideLoading();
					this.loadingText = '没有更多了';
					console.log(e.message);
				}
			},
		}
	};
</script>

<style lang="scss">
	page{
		background: #f2f2f2;
	}
	.amountDil-content{
		width: 750px;
		min-width: 750rpx;
	}
	.balance-desc{
		float: right;
		margin-top: 15px;
		margin-left: 15px;
		// margin-top: 8px;
		border-left: 12px solid transparent;
		border-right: 12px solid transparent;
		border-top: 16px solid #088EFF;
	}
	.change-kind-box{
		padding: 30px;
		height: 100px;
		// line-height: 100px;
		font-size: 32px;
		background: #fff;
		border-top:1px solid #f2f2f2;
		position: relative;
		box-sizing: border-box;
		.change-kind-amount{
			float: left;
			view{
				float: left;
			}
		}
		.change-kind-time{
			float: right;
			// padding-top: 5px;
			view{
				float: left;
				margin-top: 6px;
			}
			.balance-desc{
				margin-top: 12px;
			}
		}
		.change-kind-model{
			position: absolute;
			width: 100%;
			padding: 0 30px;
			box-sizing: border-box;
			top: 100px;
			left: 0;
			background: #fff;
			line-height: 100px;
			view.active{
				color: #088EFF;
			}
			image{
				float: right;
				width: 40px;
				height: 40px;
				margin-top: 25px;
			}
		}
	}
	.amount-list{
		border-top: 20px solid #f2f2f2; 
		.amount-box{
			width:710px;
			height:140px;
			background:rgba(255,255,255,1);
			border-radius:10px;
			border-bottom: 1px solid #f2f2f2;
			padding: 20px 30px;
			box-sizing: border-box;
			margin: 0 auto;
			margin-bottom: 20px;
			font-size: 30px;
			.box-msg-f{
				float: left;
				width: 550px;
				
				.amount-box-msg{
					line-height: 60px;
					height: 60px;
				}
				.amount-box-time{
					color: #bbb;
					font-size: 28px;
				}
			}
			
			.send-money{
				float: right;
				width: 100px;
				line-height: 100px;
				text-align: right;
				font-size: 32px;
				color: #088EFF;
			}
			.send-money.active{
				color: #e4393c;
			}
		}
	}
	.loading-text {
		// width: 700px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60px;
		line-height: 60px;
		color: #979797;
		font-size: 24px;
	}
</style>
